<template>
    <div v-show="!showDetail" class="ImgBody">
        <div class="header">
            <h1>百度搜索</h1>
            <el-input v-model="words" style="width: 70%;height: 30px;" placeholder="请输入关键词搜索" clearable>
                <template #append>
                    <Search @click="searchImg"></Search>
                </template>
            </el-input>
        </div>
        <ImgList :imgList="imgList" @viewPicture="viewPicture" :loading="loading"></ImgList>
    </div>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="imgList" :index="index">
    </Detail>
</template>

<script setup lang="ts">
import { getSearchImgs } from '@renderer/api/mohu'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import Search from '@renderer/components/theme/search.vue'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
const loading = ref(false)
let ImgBody: Element
const words = ref('')
const page = ref(1)
const maxPage = ref(0)
const size = ref(20)
const type = ref(0)
const imgList = ref<any[]>([])
const showDetail = ref(false)
const index = ref(0)

const searchImg = () => {
    imgList.value = []
    page.value = 1
    nextTick(() => {
        getImgs()
    })
}

const getImgs = async () => {
    loading.value = true
    const obj = {
        id: 10000732,
        key: 'b9bea682d5bbf442f27ba8637d558707',
        words: words.value,
        page: page.value,
        limit: size.value,
        type: type.value
    }
    const res = await getSearchImgs(obj)
    if (res.code == 200) {
        maxPage.value = res.maxpage
        res.res.forEach((item: any) => {
            const obj = {
                src: item,
                source: item,
                title: ''
            }
            imgList.value.push(obj)
        })
    }
    loading.value = false

}
const viewPicture = (num: number) => {
    index.value = num
    showDetail.value = true
}
const closePicture = () => {
    showDetail.value = false
}
const scrollEvent = _.debounce(() => {
    // 计算滚动条距离底部的距离
    const scrollBottom = ImgBody.scrollHeight! - ImgBody.scrollTop! - ImgBody.clientHeight!
    if (scrollBottom < 200) {
        if (page.value >= maxPage.value) {
            ElMessage.warning('没有更多了')
        } else {
            page.value++
            getImgs()
        }
    }
    const header = document.querySelector('.header') as HTMLElement
    if (ImgBody.scrollTop! > 300) {
        header.style.top = '-100px'
    } else {
        header.style.top = '0'
    }
}, 200)
const keyboardEvent = (e: KeyboardEvent) => {
    if (e.key === 'Enter') {
        searchImg()
    }
}
const moveEvent = _.throttle((e: any) => {
    const header = document.querySelector('.header') as HTMLElement
    if (e.clientY < 50) {
        header.style.top = '0'
    }
}, 100)
onMounted(() => {
    ImgBody = document.querySelector('.ImgBody')!
    ImgBody.addEventListener('scroll', scrollEvent)
    // 监听键盘按下 enter 键
    document.addEventListener('keydown', keyboardEvent)
    document.addEventListener('mousemove', moveEvent);
})
onBeforeUnmount(() => {
    ImgBody.removeEventListener('scroll', scrollEvent)
    document.removeEventListener('keydown', keyboardEvent)
    document.removeEventListener('mousemove', moveEvent)
})
</script>

<style scoped lang="scss">
.ImgBody {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    padding: 0 5px;
    box-sizing: border-box;
    @include mixin.scroll_bar();

    .header {
        width: 100%;
        height: 50px;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: var(--back);
        padding: 5px 10px;
        padding-top: 10px;
        text-align: center;
        display: grid;
        grid-template-columns: 150px 4fr 150px;
        align-items: center;
        justify-items: center;
        box-shadow: 0.1em 0.2em 0.3em #8f8f8f4e;
        transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);


        h1 {
            padding: 0;
            margin: 0;
            text-align: center;
            font-family: '华文行楷';
        }
    }
}
</style>